<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting" style="height: auto">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../mian">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>收费管理</a-breadcrumb-item>
        <a-breadcrumb-item>欠费记录</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <div style="margin: 0 50px">离场时间</div>
          <template>
            <div class="button_time">
              <a-button
                type="primary"
                @click="button_time(0)"
                :style="computedStyle(0)"
                >今天</a-button
              >
              <a-button
                type="primary"
                @click="button_time(1)"
                :style="computedStyle(1)"
                >昨天</a-button
              >
              <a-button
                type="primary"
                @click="button_time(2)"
                :style="computedStyle(2)"
                >本周</a-button
              >
              <a-button
                type="primary"
                @click="button_time(3)"
                :style="computedStyle(3)"
                >上周</a-button
              >
              <a-button
                type="primary"
                @click="button_time(4)"
                :style="computedStyle(4)"
                >本月</a-button
              >
            </div>
          </template>
          <template>
            <div style="margin: auto 50px">
              <a-range-picker
                :showTime="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                :placeholder="['开始时间', '结束时间']"
                @ok="onOk"
                @change="onChange"
                :value="rangePicker()"
              />
            </div>
          </template>
        </div>
        <div class="box-condition-item">
          <div style="margin: 0 50px">停车点</div>
          <template>
            <a-input
              style="margin: 0 100px 0 0px; width: 200px"
              v-model="inputPark"
              placeholder="停车点"
            />
          </template>
          <div style="margin: 0 50px">车牌号</div>
          <!--                    <template>-->
          <!--                        <a-input style="margin: 0 100px 0 0px;width: 200px" v-model="inputPlate"-->
          <!--                                 @change="queryData(1)" placeholder="车牌号"/>-->
          <!--                    </template>-->
          <template>
            <a-input
              style="margin: 0 100px 0 0px; width: 200px"
              v-model="inputPlate"
              placeholder="车牌号"
            />
          </template>
        </div>
        <div class="box-condition-item">
          <!--<div style="margin: 0 50px">状态</div>
                     <a-button type="primary" style="margin: 0 0 0 20px">欠费中</a-button>
                     <a-button type="primary" style="margin: 0 0 0 20px">已冲销</a-button>
                     <a-button type="primary" style="margin: 0 0 0 20px">已核销</a-button>-->
          <div style="margin: 0 50px">欠费金额大于</div>
          <template>
            <a-input
              style="margin: 0 100px 0 0px; width: 200px"
              v-model="inputAmountBigThan"
              placeholder="金额"
            />
          </template>
          <div style="margin: 0 50px">
            <a-button
              type="primary"
              style="margin: 0 0 0 20px"
              @click="submittext"
              >提交</a-button
            >
            <a-button
              icon="sync"
              style="margin: 0 0 0 20px"
              @click="reset"
              >重置</a-button
            >
          </div>
        </div>
      </div>
    </div>

    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div>单位：元</div>
        <div style="display: flex">
          <!--  <a-button type="primary" @click="arrearsPush">欠费短信推送</a-button> -->
          &#12288;
          <a-button type="primary" @click="downloadDataClick" icon="download"
            >导出</a-button
          >
        </div>
      </div>
      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          @change="tableChange"
          bordered
          size="small"
          :scroll="scroll"
          :customRow="customRow"
          :rowClassName="setRowClassName"
        >
          <template slot="amountShould" slot-scope="text">
            <div>{{ text / 100 }}</div>
          </template>
          <template slot="amountAccepted" slot-scope="">
            <div>0</div>
          </template>
          <template slot="footer" v-if="isShowTotal">
            <div style="display: flex; height: 30px; margin: 0 -16px">
              <div style="flex: 1 1 80%; height: 100%; padding-left: 10px">
                合计
              </div>
              <div style="flex: 1 1 17%; height: 100%; padding-left: 1%">
                {{ shouldMoney / 100 }}
              </div>
              <div style="flex: 1 1 17%; height: 100%">
                {{ realityMoney / 100 }}
              </div>
            </div>
          </template>
        </a-table>
      </div>
    </div>

    <!-- 弹窗  @ok="commitCorrect" @cancel="cancelCorrect" -->
    <a-modal title="车辆图片" v-model="imagePopupData.visible" :width="958">
      <div class="box-correction-popup">
        <!-- 图片 -->
        <a-carousel class="box-image" autoplay>
          <template v-for="image in imagePopupData.imageList">
            <img :key="image" :src="image" class="icon-image" />
          </template>
        </a-carousel>
      </div>
      <template slot="footer">
        <a-button type="primary" key="submit" @click="hideImagePopup">
          关闭
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
// import Constant from '../../utils/Constant';
import moment from "moment";
import ArrearsRecordApi from "../../api/charge/ArrearsRecord";
import RevenueStatistics from "../../api/charge/RevenueStatistics";

const columns = [
  {
    title: "序号",
    dataIndex: "no",
    width: "10%",
  },
  {
    title: "停车点",
    dataIndex: "parkName",
    width: "20%",
  },
  {
    title: "车牌号",
    dataIndex: "licencePlate",
    width: "10%",
  },
  {
    title: "进场时间",
    dataIndex: "startTime",
    width: "20%",
  },
  {
    title: "离场时间",
    dataIndex: "endTime",
    width: "20%",
  },
  {
    title: "应收",
    dataIndex: "shouldMoney",
    scopedSlots: { customRender: "amountShould" },
    width: "10%",
  },
  {
    title: "已收",
    dataIndex: "accepted",
    scopedSlots: { customRender: "amountAccepted" },
  },
];

const dataSource = [];

const queryCondition = {
  parkName: "",
  plate: "",
  amountBigThan: "",
  amountLessThan: "",
  curr: 1,
  limit: 20,
};

export default {
  name: "ArrearsRecord",
  /*数据层*/
  data() {
    return {
      parks: [],
      selectId: -1,
      momentArr: [],
      columns: columns,
      dataSource: dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 20,
        current: 1,
      },
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      tableState: {
        rowId: -1,
      },
      /*当前选中的行数据*/
      currRowData: "",
      queryCondition,
      inputPark: "",
      inputPlate: "",
      inputAmountBigThan: "",
      /* 统计 */
      isShowTotal: false,
      realityMoney: 0,
      shouldMoney: 0,
      /* 图片弹窗 */
      imagePopupData: {
        visible: false,
        imageList: [],
      },
      loading: false,
    };
  },
  /*方法层*/
  methods: {
    // 欠费推送按钮
    arrearsPush() {
      ArrearsRecordApi.arrearsPush().then((res) => {
        if (res.code == 2000) {
          if (res.data) {
            this.$message.success(res.data);
          } else {
            this.$message.success("发送成功");
          }
        } else {
          this.$message.warn(res.data);
        }
      });
    },
    tableChange(page) {
      this.queryData(page.current);
    },

    downloadDataClick() {
      let condition = this.getQueryCondition();
      ArrearsRecordApi.exportArrearsRecordExcel(condition)
        .then((res) => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel",
          });
          let fileName = decodeURIComponent(res.headers.filename);
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", `${fileName}`);
          link.click();
        })
        .catch((err) => {
          let data = err.data;
          if (data) {
            return this.$message.warn(data);
          }
          console.log("导出欠费记录数据异常！", err);
        });
    },

    /*时间按钮控制*/
    button_time(e) {
      this.selectId = e;
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          break;
        case 2:
          momentStart = moment().week(moment().week()).startOf("week");
          momentEnd = moment().week(moment().week()).endOf("week");
          break;

        case 3:
          momentStart = moment()
            .week(moment().week() - 1)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() - 1)
            .endOf("week");
          break;
        case 4:
          momentStart = moment().month(moment().month()).startOf("month");
          momentEnd = moment().month(moment().month()).endOf("month");
          break;
        default:
          break;
      }
      this.momentArr[0] = momentStart;
      this.momentArr[1] = momentEnd;
      this.queryData();
    },

    /*日期选择*/
    onChange(date) {
      this.selectId = -1;
      this.momentArr = date;
    },

    onOk() {
      this.selectId = -1;
      this.queryData();
    },

    rangePicker() {
      return this.momentArr;
    },

    queryData(curr) {
      this.loading = true;
      this.currRowData = "";
      this.tableState.rowId = -1;
      let amountBigThan = this.inputAmountBigThan;
      if (amountBigThan != "") {
        if (isNaN(parseInt(amountBigThan))) {
          return this.$message.warn("金额请输入数字！");
        }
      }
      let condition = this.getQueryCondition();
      condition.curr = curr || 1;
      this.isShowTotal = false;
      RevenueStatistics.getArrearsTotal(condition)
        .then((data) => {
          let { realityMoney, shouldMoney } = data.data;
          this.realityMoney = realityMoney;
          this.shouldMoney = shouldMoney;
          return ArrearsRecordApi.getArrearsList(condition);
        })
        .then((data) => {
          this.isShowTotal = true;
          let { total, pageNum, pageSize, list } = data.data;
          let array = list.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.dataSource = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.loading = false;
        })
        .catch((error) => {
          this.$message.error("获取欠费名单列表异常！");
          console.log("获取欠费名单列表异常！", error);

          this.loading = false;
        });
    },

    getQueryCondition() {
      let condition = this.queryCondition;
      let amountBigThan = this.inputAmountBigThan;
      let beginMoment = this.momentArr[0];
      let endMoment = this.momentArr[1];

      if (beginMoment != undefined && endMoment != undefined) {
        condition.startTimeStamp = new Date(beginMoment).getTime() / 1000;
        condition.endTimeStamp = new Date(endMoment).getTime() / 1000;
        condition.timeScreenCondition = 6;
      } else {
        condition.timeScreenCondition = 0;
      }

      condition.amountBigThan = amountBigThan * 100;
      condition.plate = this.inputPlate;
      condition.parkName = this.inputPark;

      return condition;
    },

    /*表格*/
    customRow(record) {
      return {
        on: {
          // 事件
          click: () => {
            this.currRowData = record;
            this.tableState.rowId = record.no;
          },
          dblclick: () => {
            this.showImagePopup(record);
          },
        },
      };
    },

    setRowClassName(record) {
      return record.no === this.tableState.rowId ? "clickRowStyl" : "";
    },
    reset() {
      this.inputPark = "";
      this.inputPlate = "";
      this.selectParkId = [];
      this.inputAmountBigThan = "";
      this.inputUorder = "";
      this.inputTorder = "";
      this.momentArr = [];
      this.queryCondition.payStatus = 0;
      this.queryData();
    },
    submittext() {
      this.queryData();
    },
    /* ----------------- 显示弹窗 ----------------- */
    showImagePopup(item) {
      let { comeInUrl, getOutUrl } = item;
      this.imagePopupData.visible = true;
      let imageList = [];
      if (comeInUrl) {
        let array = comeInUrl.split(",").map((item) => {
          // return Constant.QiNiuURL + '/' + item;
          return item;
        });
        imageList.push(...array);
      }
      if (getOutUrl) {
        let array = getOutUrl.split(",").map((item) => {
          return item;
        });
        imageList.push(...array);
      }
      this.imagePopupData.imageList = imageList;
    },

    hideImagePopup() {
      this.imagePopupData.visible = false;
    },
  },
  /*计算层*/
  computed: {
    computedStyle() {
      return function (selectId) {
        return this.selectId == selectId ? "" : "";
      };
    },
  },
  /*渲染层*/
  mounted() {
    /* this.queryData() */
    this.button_time(0);
  },
};
</script>

<style>
.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 174px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-item {
  display: flex;
  align-items: center;
  min-width: 1500px;
  padding: 10px 0;
}

.box-condition-item .box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 5px 20px 5px;
}

.button_time button {
  margin-left: 10px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%;
  /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* box-correction-popup */
.box-correction-popup {
  padding: 20px;
  height: 555px;
  /* flex */
  display: flex;
  align-items: center;
}

.box-correction-popup .box-image {
  padding: 0 15px;
  width: 888px;
  height: 500px;
}

.box-correction-popup .box-image .icon-image {
  width: 100%;
  height: 100%;
}
</style>
